<!DOCTYPE html>
<html>
<head>
<title>Fluid Dynamics Pipe</title>
</head>
<body>
<canvas id="physicsCanvas" width="800" height="400"></canvas>
<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // Set a white background
    ctx.fillStyle = 'white';
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // --- Define drawing parameters ---
    const cy = 200; // y-coordinate of the centerline
    const r1 = 80;  // Radius in Region I
    const r2 = 40;  // Radius in Region II (half of r1)

    const x_start = 50;
    const x1_transition = 280; // Start of transition
    const x2_transition = 430; // End of transition
    const x_end = 750;

    // --- Draw the pipe walls ---
    ctx.strokeStyle = 'black';
    ctx.lineWidth = 3;

    // Top wall
    ctx.beginPath();
    ctx.moveTo(x_start, cy - r1);
    ctx.lineTo(x1_transition, cy - r1);
    // Smooth transition curve
    ctx.bezierCurveTo(x1_transition + 40, cy - r1, x2_transition - 40, cy - r2, x2_transition, cy - r2);
    ctx.lineTo(x_end, cy - r2);
    ctx.stroke();

    // Bottom wall
    ctx.beginPath();
    ctx.moveTo(x_start, cy + r1);
    ctx.lineTo(x1_transition, cy + r1);
    // Smooth transition curve
    ctx.bezierCurveTo(x1_transition + 40, cy + r1, x2_transition - 40, cy + r2, x2_transition, cy + r2);
    ctx.lineTo(x_end, cy + r2);
    ctx.stroke();

    // --- Draw the dashed lines ---
    ctx.lineWidth = 2;
    ctx.setLineDash([6, 6]);

    // Centerline
    ctx.beginPath();
    ctx.moveTo(x_start - 20, cy);
    ctx.lineTo(x_end + 20, cy);
    ctx.stroke();

    // Vertical line at the start of transition
    ctx.beginPath();
    ctx.moveTo(x1_transition, cy - r1 - 20);
    ctx.lineTo(x1_transition, cy + r1 + 20);
    ctx.stroke();

    // Vertical line at the end of transition
    ctx.beginPath();
    ctx.moveTo(x2_transition, cy - r2 - 40);
    ctx.lineTo(x2_transition, cy + r2 + 40);
    ctx.stroke();

    // Reset to solid lines
    ctx.setLineDash([]);

    // --- Draw the fluid particles ---
    const particleRadius = 8;
    const particle1_x = 150;
    const particle2_x = 650;

    // Particle 1
    ctx.fillStyle = '#C00000'; // Dark red color
    ctx.strokeStyle = 'black';
    ctx.lineWidth = 0.5;
    ctx.beginPath();
    ctx.arc(particle1_x, cy, particleRadius, 0, 2 * Math.PI);
    ctx.fill();
    ctx.stroke();

    // Particle 2
    ctx.beginPath();
    ctx.arc(particle2_x, cy, particleRadius, 0, 2 * Math.PI);
    ctx.fill();
    ctx.stroke();

    // --- Draw the velocity arrow ---
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 3;

    const arrow_start_x = particle1_x + particleRadius + 5;
    const arrow_end_x = arrow_start_x + 80;
    const arrow_head_len = 18;
    const arrow_head_width = 8;

    // Arrow line
    ctx.beginPath();
    ctx.moveTo(arrow_start_x, cy);
    ctx.lineTo(arrow_end_x, cy);
    ctx.stroke();

    // Arrow head
    ctx.beginPath();
    ctx.moveTo(arrow_end_x, cy);
    ctx.lineTo(arrow_end_x - arrow_head_len, cy - arrow_head_width);
    ctx.lineTo(arrow_end_x - arrow_head_len, cy + arrow_head_width);
    ctx.closePath();
    ctx.fill();

    // --- Add text labels ---
    ctx.fillStyle = 'black';
    ctx.font = 'bold 40px "Times New Roman", serif';

    // Label "V"
    ctx.fillText('V', 180, cy - 35);

    // Label "Region I"
    ctx.fillText('Region I', 100, 70);

    // Label "Region II"
    ctx.fillText('Region II', 530, 95);

</script>
</body>
</html>